import ImBtn from '@/components/Im/ImBtn';
import { CONFIG } from '@/constants';
import { ImageUrl } from '@/utils';
import { FormattedMessage, useIntl } from '@umijs/max';
import { Avatar, Descriptions, DescriptionsProps, Image, Rate } from 'antd';
import { useEffect, useState } from 'react';
type IInfo = {
    info: any;
    showInfoBtn?: boolean;
    release_id?: number;
    type?: string;
};
const HomePageUserInfo = (props: IInfo) => {
    const intl = useIntl();
    const [items, setItems] = useState<DescriptionsProps['items']>([]);
    function ShowMedia({ item }: { item: string }) {
        return (
            <>
                {item.substring(-3, 3) === 'mp4' ? (
                    <video
                        src={CONFIG.IMAGE_URL + item}
                        style={{ width: 200, height: 200 }}
                        poster={
                            CONFIG.IMAGE_URL +
                            item +
                            '?x-oss-process=video/snapshot,t_1000,f_jpg,w_640,h_360'
                        }
                    ></video>
                ) : (
                    <Image
                        width={200}
                        height={200}
                        src={CONFIG.IMAGE_URL + item}
                    />
                )}
            </>
        );
    }
    useEffect(() => {
        if (props.info) {
            const info = props.info;
            setItems([
                {
                    label: <FormattedMessage id="头像"></FormattedMessage>,
                    children: (
                        <div>
                            <Avatar
                                src={
                                    <img
                                        src={ImageUrl(info.avatar) || ''}
                                        alt="avatar"
                                    />
                                }
                            />
                        </div>
                    ),
                },
                {
                    label: <FormattedMessage id="名称"></FormattedMessage>,
                    children: (
                        <div>
                            {info[intl.formatMessage({ id: 'item.username' })]}
                        </div>
                    ),
                },
                {
                    label: <FormattedMessage id="标签"></FormattedMessage>,
                    children: (
                        <div>
                            <Avatar.Group>
                                {info.label.map((item) => (
                                    <Avatar
                                        key={item.url}
                                        shape="square"
                                        src={
                                            <img
                                                src={ImageUrl(item.url) || ''}
                                                alt="avatar"
                                            />
                                        }
                                    />
                                ))}
                            </Avatar.Group>
                        </div>
                    ),
                },
                {
                    label: <FormattedMessage id="综合评价"></FormattedMessage>,
                    children: (
                        <div>
                            <Rate
                                disabled
                                defaultValue={parseInt(info.rating / 20)}
                            />
                        </div>
                    ),
                },
                {
                    label: <FormattedMessage id="访问量"></FormattedMessage>,
                    span: 2,
                    children: <div>{info.visits}</div>,
                },
                {
                    label: <FormattedMessage id="简介"></FormattedMessage>,
                    span: 3,
                    children: (
                        <div>
                            {info[intl.formatMessage({ id: 'item.profile' })] ||
                                intl.formatMessage({
                                    id: '暂无信息',
                                })}
                        </div>
                    ),
                },
                {
                    label: <FormattedMessage id="主营"></FormattedMessage>,
                    span: 3,
                    children: (
                        <div>
                            {info[
                                intl.formatMessage({
                                    id: 'item.main_product',
                                })
                            ] ||
                                intl.formatMessage({
                                    id: '暂无信息',
                                })}
                        </div>
                    ),
                },
                {
                    label: <FormattedMessage id="产品介绍"></FormattedMessage>,
                    span: 3,
                    children: (
                        <>
                            {info.product_image &&
                            info.product_image.length > 0 ? (
                                <>
                                    {info.product_image.map(
                                        (item: string, index: number) => (
                                            <ShowMedia
                                                key={index}
                                                item={item}
                                            />
                                        ),
                                    )}
                                </>
                            ) : (
                                <FormattedMessage id="没有数据"></FormattedMessage>
                            )}
                        </>
                    ),
                },
                {
                    label: <FormattedMessage id="商家图片"></FormattedMessage>,
                    span: 3,
                    children: (
                        <>
                            {info.shop_image && info.shop_image.length > 0 ? (
                                <>
                                    {info.shop_image.map(
                                        (item: string, index: number) => (
                                            <ShowMedia
                                                key={index}
                                                item={item}
                                            />
                                        ),
                                    )}
                                </>
                            ) : (
                                <FormattedMessage id="没有数据"></FormattedMessage>
                            )}
                        </>
                    ),
                },
            ]);
        }
    }, [props.info]);
    return (
        <>
            <Descriptions
                column={3}
                title={<FormattedMessage id="基本信息"></FormattedMessage>}
                extra={<ImBtn toMobile={props.info?.account}></ImBtn>}
                items={items}
            />
        </>
    );
};
export default HomePageUserInfo;
